From 5428fdf82a4260fa4f5e0bcdb722d6716740d8bf Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 1 Aug 2022 20:50:16 -0700
Subject: update invoice when tip changes

---
 src/routes/invoice/[id].svelte | 282 ++++++++++++++++++++++-------------------
 1 file changed, 150 insertions(+), 132 deletions(-)

(limited to 'src/routes/invoice/[id].svelte')

diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 1f1a7aa3..0f5a1437 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,11 +1,16 @@
 <script>
+	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/env';
 	import { user } from '$lib/store';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	export let amount, rate, text;
+	export let amount, rate, text, username;
+
+	let mobileMenu;
+	$: logMobileParent(showMobileTip);
+	let logMobileParent = () => mobileMenu && console.log(mobileMenu.offsetParent);
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
@@ -31,6 +36,17 @@
 		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
 	);
 
+	$: update(tipAmountSats);
+	let update = async (n) => {
+		let { id } = await post('/invoice', {
+			amount: amount + reverseFormat(n),
+			rate,
+			text,
+			username
+		});
+		({ text } = await get(`/invoice/${id}`));
+	};
+
 	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
@@ -63,8 +79,9 @@
 		customTipAmount = e.target.value;
 	};
 
-	$: init(browser && $user);
-	let init = async (ready) => {
+	$: generate(text);
+	let generate = async (ready) => {
+		console.log('GENERATE', text);
 		if (!ready) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
@@ -104,158 +121,159 @@
 	let customInput;
 </script>
 
-{#if $user}
-	<div class:full-shadow={showMobileTip}>
+<div class:full-shadow={showMobileTip}>
+	{#if $user}
 		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
 			<Icon icon="arrow-left" style="w-10" />
 		</button>
+	{/if}
 
-		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+	<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+		<div
+			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+		>
+			<!-- tipping section  -->
 			<div
-				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+				bind:this={mobileMenu}
+				class="absolute {showMobileTip
+					? 'top-[calc(100vh - 100%)]'
+					: 'top-[calc(100vh)]'} left-0 bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 md:static text-center space-y-5 z-50"
 			>
-				<!-- tipping section  -->
-				<div
-					class="absolute {showMobileTip
-						? 'bottom-0'
-						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-				>
-					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+				<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+				<div>
+					<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+						class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+					>
+					<span class="block text-secondary text-sm">{tipPercent}%</span>
+				</div>
+
+				<input
+					id="slider"
+					type="range"
+					min="0"
+					max="100"
+					value={tipPercent}
+					class="px-2"
+					on:input={(e) => {
+						customTipAmount = '';
+						tipPercent = e.target.value;
+					}}
+				/>
 
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+				<div>
+					{#each tipAmounts as amount}
+						<button
+							class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+								amount.slice(0, 2) ||
+							((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+								? '!bg-black text-white'
+								: ''}"
+							on:click={() => handleTipButtonClick(amount)}>{amount}</button
 						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
+					{/each}
 
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							tipPercent = e.target.value;
-						}}
-					/>
-
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-									amount.slice(0, 2) ||
-								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
-							>
-						{/each}
-
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								bind:this={customInput}
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-									? !customTipAmount && !tipAmount
-										? 'opacity-50'
-										: 'opacity-100'
-									: !customTipAmount
+					<div class="relative">
+						<span
+							class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}">$</span
+						>
+						<input
+							bind:this={customInput}
+							type="number"
+							min="0"
+							on:input={(e) => handleCustomTipAmount(e)}
+							class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+							placeholder="Other"
+						/>
+						<button
+							class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+								? !customTipAmount && !tipAmount
 									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-								>Done</button
-							>
-						</div>
+									: 'opacity-100'
+								: !customTipAmount
+								? 'opacity-50'
+								: 'opacity-100'}"
+							disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+							on:click={() => (showMobileTip = false)}>Done</button
+						>
 					</div>
 				</div>
+			</div>
+
+			<div
+				class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+				id="section-divider"
+			/>
+
+			<!-- invoice section -->
+			<div class="text-center space-y-5">
+				<button
+					class="block md:hidden bg-black {showMobileTip
+						? 'text-white/50'
+						: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+					on:click={() => (showMobileTip = true)}
+					disabled={showMobileTip}
+				>
+					<svg
+						width="24"
+						height="24"
+						class="mr-1"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg> Add a tip
+				</button>
+
+				<span class="text-secondary block"
+					>Scan to pay <span class="text-black font-semibold">{username}</span></span
+				>
 
 				<div
-					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
+					bind:this={qr}
+					class="border {showMobileTip
+						? 'border-gray-400'
+						: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
 				/>
 
-				<!-- invoice section -->
-				<div class="text-center space-y-5">
-					<button
-						class="block md:hidden bg-black {showMobileTip
-							? 'text-white/50'
-							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-						on:click={() => (showMobileTip = true)}
-						disabled={showMobileTip}
-					>
-						<svg
-							width="24"
-							height="24"
-							class="mr-1"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
+				<div class="px-5 space-y-3">
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Invoice</span>
+						<span class="font-semibold text-sm"
+							>{invoiceAmountFiatFormatted}
+							<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
 						>
-							<path
-								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg> Add a tip
-					</button>
-
-					<span class="text-secondary block"
-						>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
-					>
+					</div>
 
-					<div
-						bind:this={qr}
-						class="border {showMobileTip
-							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative"
-					/>
-
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
-						</div>
+					<div class="flex justify-between">
+						<span class="font-semibold text-sm">Tip</span>
+						<span class="font-semibold text-sm"
+							>{tipAmountFormatted}
+							<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+						>
+					</div>
+
+					<div class="flex justify-between">
+						<span class="font-bold">Total</span>
+						<span class="font-bold"
+							>{totalAmountFormatted}
+							<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+						>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-{/if}
+</div>
 
 <style>
 	#slider {
-- 
cgit v1.2.3